<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d旋转 </title>
		<style>
			@keyframes dh{
				from{
					height: 200px;
					width: 300px;
					transform: rotateX( 0deg) rotateY( 0deg);
				}
				10%{
					height: 250px;
					width: 350px;
					transform: rotateX(20deg) rotateY(20deg);
				}
				20%{
					height: 300px;
					width: 400px;
					transform: rotateX(30deg) rotateY(40deg);
				}
				30%{
					height: 350px;
					width: 450px;
					transform: rotateX(60deg) rotateY(60deg);
				}
				40%{
					height: 400px;
					width: 500px;
					transform: rotateX(70deg) rotateY(70deg);
				}
				60%{
					height: 450px;
					width: 550px;
					transform: rotateX(110deg) rotateY(110deg);
				}
				70%{
					height: 500px;
					width: 600px;
					transform: rotateX(140deg) rotateY(140deg);
				}
				80%{
					height: 550px;
					width: 650px;
					transform: rotateX(160deg) rotateY(160deg);
				}
				to{
					transform: rotateX(180deg) rotateY(180deg);
					height: 600px;
					width: 800px;
				}
			}
			#d1{
				height: 200px;
				width: 300px;
				text-align: center;
				line-height: 200px;
				font-size: 40px;
				font-family: 楷体;
				background-color: firebrick;
				margin: 100px auto;
				background-image: linear-gradient(red,blue,green,yellow,pink);
			}
			@media only screen and (max-width:1200px){
				#d1{
					transform: rotateX(180deg) rotateY(180deg);
					animation: dh 3s 1 alternate forwards;
				}
			}
			
		</style>
	</head>
	<body>
		<div id="d1">
			教育改变生活
		</div>
	</body>
</html>